/**
 * Info
 * saveProperty
 *
 *
 */

import React, {Component} from 'react';
import {connect} from 'dva';
import Validator from '../../../utils/validator/Validator';
import consts from '../../../utils/validator/Validator';

class Info extends Component {
    constructor(props) {
        super(props);
        this.state={
            data: {}
        }
    }

    static defaultProps() {
        return {
            details: {}
        }
    }

    componentWillMount() {
        this.data = $.extend(true, {}, this.props.data);
        this.setState({
            data: this.data
        });
    }

    componentWillReceiveProps(nextProps) {
        this.data = $.extend(true, {}, nextProps.data);
        this.setState({
            data: this.data
        });
    }

    checkValidate(type) {
        let validator = Validator();
        if ("resource_tag_title" === type) {
            validator.addRule($(this.refs.resourceTitle), [{
                validator: "max:36",
                error: $._('Subject name can not more than 36')
            }]);
        } else if ("summary" === type) {
            validator.addRule($(this.refs.summary), [{
                validator: "max:200",
                error: $._('Info can not more than 200')
            }]);
        }

        const errors = validator.execute();
        if (errors) {
            alert(errors);
            return false;
        }

        return true;
    }

    changeProperty(e) {
        const element = $(e.target || e.srcElement),
            type = element.attr("name"),
            value = element.val();
        const preValue = this.data[type];
        this.data[type] = value;

        this.setState({
            data: this.data
        });

        if (!this.checkValidate(type)){
            this.data[type] = preValue;
        }
    }

    changeSelectProperty(e){
        const element = $(e.target || e.srcElement),
            type = element.attr("name"),
            value = element.val();
        const preValue = this.data[type];
        this.data[type] = value;
        this.setState({
            data: this.data
        });

        if (!this.checkValidate(type)){
            this.data[type] = preValue;
        }
        this.props.saveProperty(this.data);
    }

    saveProperty() {
        if (!this.data.resource_tag_title) {
            this.data.resource_tag_title = this.props.data.resource_tag_title;
            this.setState({
                data: this.data
            });
            alert($._("Name can not be empty"));
        } else {
            this.props.saveProperty(this.data);
        }
    }

    saveRecognizeProperty() {
        this.props.saveRecognizeProperty(this.data);
    }

    render() {
        const data = this.state.data;
        let cateListNode = '';
        if (data.editor_cate_list && data.editor_cate_list.length) {
            cateListNode =
                data.editor_cate_list.map(function (cate) {
                    return (
                        <option key={ cate.cate_id } value={ cate.cate_id }>{ cate.cate_name }</option>
                    )
                });
        }
        const backStyle = {
            backgroundSize: "cover",
            backgroundImage: 'url(' + data.media_src + ')',

        }
        return (
            <div className="info-content">
                <div className="info-pic" style={backStyle}>
                </div>
                <div className="info-region">
                    <div className="info-item">
                        <span>{$._('Name')}</span>
                        <input ref="resourceTitle" onChange={ this.changeProperty.bind(this) }
                               onBlur={ this.saveProperty.bind(this) }
                               name="resource_tag_title" type="text" value={ data.resource_tag_title || "" }/>
                        <span>{$._('classification')}</span>
                        <select value={ data.cate_id || "" } onChange={ this.changeSelectProperty.bind(this)} name="cate_id">
                            <option value={ consts.DEFAULT_CATE_ID }>{$._('Default classify')}</option>
                            {cateListNode}
                        </select>
                    </div>
                    <div className="info-item">
                        <span>{$._('Introdution')}</span>
                        <textarea ref='summary' onChange={ this.changeProperty.bind(this)  }
                                  onBlur={ this.saveRecognizeProperty.bind(this) }
                                  name="summary" value={ data.summary || "" }>
                        </textarea>
                    </div>
                </div>
            </div>
        )
    }
}

export default Info;
